<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>连接测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .log {
            background: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            max-height: 300px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
        button {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .success { background: #4CAF50; color: white; }
        .error { background: #f44336; color: white; }
        .info { background: #2196F3; color: white; }
    </style>
</head>
<body>
    <h1>实时检测连接测试</h1>
    
    <div class="test-section">
        <h2>1. 基础连接测试</h2>
        <button onclick="testBasicConnection()" class="info">测试基础连接</button>
        <div id="basic-log" class="log"></div>
    </div>
    
    <div class="test-section">
        <h2>2. SSE流连接测试</h2>
        <button onclick="testSSEConnection()" class="info">测试SSE连接</button>
        <button onclick="stopSSEConnection()" class="error">停止SSE连接</button>
        <div id="sse-log" class="log"></div>
    </div>
    
    <div class="test-section">
        <h2>3. 实时处理测试</h2>
        <button onclick="testRealtimeProcessing()" class="info">测试实时处理</button>
        <div id="realtime-log" class="log"></div>
    </div>

    <script>
        let eventSource = null;
        
        function log(elementId, message, type = 'info') {
            const logElement = document.getElementById(elementId);
            const timestamp = new Date().toLocaleTimeString();
            const className = type === 'error' ? 'error' : type === 'success' ? 'success' : 'info';
            logElement.innerHTML += `<div class="${className}">[${timestamp}] ${message}</div>`;
            logElement.scrollTop = logElement.scrollHeight;
        }
        
        async function testBasicConnection() {
            log('basic-log', '开始测试基础连接...');
            
            try {
                const response = await fetch('http://localhost:5000/api/pose/status');
                if (response.ok) {
                    const data = await response.json();
                    log('basic-log', `✅ 连接成功: ${JSON.stringify(data)}`, 'success');
                } else {
                    log('basic-log', `❌ 连接失败: ${response.status} ${response.statusText}`, 'error');
                }
            } catch (error) {
                log('basic-log', `❌ 连接错误: ${error.message}`, 'error');
            }
        }
        
        function testSSEConnection() {
            log('sse-log', '开始测试SSE连接...');
            
            if (eventSource) {
                eventSource.close();
            }
            
            eventSource = new EventSource('http://localhost:5000/api/pose/realtime/stream');
            
            eventSource.onopen = function(event) {
                log('sse-log', '✅ SSE连接已建立', 'success');
            };
            
            eventSource.onmessage = function(event) {
                log('sse-log', `📨 收到数据: ${event.data}`);
                try {
                    const data = JSON.parse(event.data);
                    if (data.complete) {
                        log('sse-log', '✅ SSE流完成', 'success');
                    }
                } catch (e) {
                    log('sse-log', `⚠️ 数据解析错误: ${e.message}`, 'error');
                }
            };
            
            eventSource.onerror = function(event) {
                log('sse-log', `❌ SSE连接错误: ${event.type}`, 'error');
                log('sse-log', `连接状态: ${eventSource.readyState}`, 'error');
            };
        }
        
        function stopSSEConnection() {
            if (eventSource) {
                eventSource.close();
                log('sse-log', '🛑 SSE连接已关闭', 'info');
                eventSource = null;
            }
        }
        
        async function testRealtimeProcessing() {
            log('realtime-log', '开始测试实时处理...');
            
            try {
                // 测试开始处理
                const startResponse = await fetch('http://localhost:5000/api/pose/realtime/start', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                if (startResponse.ok) {
                    const startData = await startResponse.json();
                    log('realtime-log', `✅ 开始处理成功: ${JSON.stringify(startData)}`, 'success');
                } else {
                    log('realtime-log', `❌ 开始处理失败: ${startResponse.status}`, 'error');
                }
                
                // 等待2秒后停止处理
                setTimeout(async () => {
                    try {
                        const stopResponse = await fetch('http://localhost:5000/api/pose/realtime/stop', {
                            method: 'POST'
                        });
                        
                        if (stopResponse.ok) {
                            const stopData = await stopResponse.json();
                            log('realtime-log', `✅ 停止处理成功: ${JSON.stringify(stopData)}`, 'success');
                        } else {
                            log('realtime-log', `❌ 停止处理失败: ${stopResponse.status}`, 'error');
                        }
                    } catch (error) {
                        log('realtime-log', `❌ 停止处理错误: ${error.message}`, 'error');
                    }
                }, 2000);
                
            } catch (error) {
                log('realtime-log', `❌ 实时处理错误: ${error.message}`, 'error');
            }
        }
        
        // 页面加载时自动测试基础连接
        window.onload = function() {
            testBasicConnection();
        };
    </script>
</body>
</html>



